import React from 'react';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import QueueAnim from 'rc-queue-anim';
import { Row, Col, Button } from 'antd';

class Pricing1 extends React.PureComponent {
  render() {
    return (
      <div className="home-page-wrapper pricing1-wrapper">
        <div className="home-page pricing1">
          <div className="pricing1-title-wrapper">
            <h1 className="pricing1-title-h1">价目表</h1>
          </div>
          <OverPack playScale={0.3} className="pricing1-content-wrapper">
            <QueueAnim
              type="bottom"
              component={Row}
              leaveReverse
              ease={['easeOutQuad', 'easeInOutQuad']}
              key="content"
            >
              <Col key="block0" className="pricing1-block" md={8} xs={24}>
                <QueueAnim type="bottom" className="pricing1-block-box ">
                  <div className="pricing1-top-wrapper">
                    <div className="pricing1-name">Free</div>
                    <h1 className="pricing1-money">¥0</h1>
                  </div>
                  <div className="pricing1-content">
                    <span>
                      140-500Mbps<br /> 140 GB-50TB（含）<br /> 14500GB流量包<br />{' '}
                      14国内按峰值宽带账单<br /> 14弹性计算<br /> 14云服务器 ECS{' '}
                    </span>
                  </div>
                  <i className="pricing1-line" />
                  <div className="pricing1-button-wrapper">
                    <Button className="pricing1-button" href="#">
                      免费试用
                    </Button>
                  </div>
                </QueueAnim>
              </Col>
              <Col key="block1" className="pricing1-block" md={8} xs={24}>
                <QueueAnim type="bottom" className="pricing1-block-box active">
                  <div className="pricing1-top-wrapper">
                    <div className="pricing1-name">Starter</div>
                    <h1 className="pricing1-money">¥199</h1>
                  </div>
                  <div className="pricing1-content">
                    <span>
                      14500-5Gbps<br />1410 GB-50TB（含）<br />141TB流量包<br />14国内按峰值宽带账单<br />14弹性计算<br />云服务器
                      ECS
                    </span>
                  </div>
                  <i className="pricing1-line" />
                  <div className="pricing1-button-wrapper">
                    <Button className="pricing1-button" href="#">
                      立即购买
                    </Button>
                  </div>
                </QueueAnim>
              </Col>
              <Col key="block2" className="pricing1-block" md={8} xs={24}>
                <QueueAnim type="bottom" className="pricing1-block-box ">
                  <div className="pricing1-top-wrapper">
                    <div className="pricing1-name">Pro</div>
                    <h1 className="pricing1-money">¥999</h1>
                  </div>
                  <div className="pricing1-content">
                    <span>
                      14大于5Gbps<br />1450 GB-100TB（含）<br />145TB流量包<br />14国内按峰值宽带账单<br />14弹性计算<br />14云服务器
                      ECS
                    </span>
                  </div>
                  <i className="pricing1-line" />
                  <div className="pricing1-button-wrapper">
                    <Button className="pricing1-button" href="#">
                      立即购买
                    </Button>
                  </div>
                </QueueAnim>
              </Col>
            </QueueAnim>
          </OverPack>
        </div>
      </div>
    );
  }
}

export default Pricing1;
